<template>
	<div>
		<!-- 面包屑 -->
		<div>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">网页页面</el-breadcrumb-item>
				<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>


		<!-- 输入框 -->
		<div style="margin-top:10px;">
			<el-form :inline="true">

				<el-form-item label="驿站名称:">
					<el-input v-model="queryInfo.communityName" placeholder="请输入驿站名称"></el-input>
				</el-form-item>

				<el-form-item label="小区名称:">
					<el-input v-model="queryInfo.communityDistrict" placeholder="请输入小区名称"></el-input>
				</el-form-item>

				<el-form-item label="创建时间:">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="queryCommunityList">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 搜索 -->
		<div style="margin-bottom:10px;">
			<el-button type="primary" @click="xinzheng">新增驿站</el-button>
		</div>


		<!-- 表格展示数据 -->
		<div>
			<template>
				<el-table stripe :data="communityList" style="width: 100%" border
					:header-cell-style="{ backgroundColor:'#eee'}">
					<el-table-column prop="courierStationId" label="ID">
					</el-table-column>
					<el-table-column prop="courierStationName" label="驿站名称">
					</el-table-column>
					<el-table-column prop="courierStationImage" label="驿站照片">
					</el-table-column>
					<el-table-column prop="courierStationAddress" label="驿站地址">
					</el-table-column>
					<el-table-column prop="courierStationCommunityName" label="所在小区">
					</el-table-column>
					<el-table-column prop="courierStationCommunityId" label="订单总量">
					</el-table-column>
					<el-table-column prop="addTime" label="添加时间">
					</el-table-column>
					<el-table-column prop="shopPassword" label="状态">
					</el-table-column>
					<el-table-column label="操作">
						<el-button type="text">下架</el-button>
						<!-- <el-button type="text">上架</el-button> -->
						<!-- 使用作用域插槽 -->
						<template slot-scope="scope">
							<el-button type="text" @click="bianji(scope.row)">编辑</el-button>
						</template>

					</el-table-column>
				</el-table>
			</template>
		</div>



		<!-- 分页 -->
		<div style="margin-top:10px;">
			<!-- current-page：要访问的页码
			page-sizes：可选择的每页展示的条数
			page-size：每页展示的条数
			total：数据总条数
			@size-change：当选择页码时触发的事件
			@current-change:当每页展示的条数发生改变时，触发的函数
			 -->
			<el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="100"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<!-- 弹出对话框 -->
		<el-dialog :title='title' :visible.sync="show" @click="quxiao">
			<el-form :model="courier">
				<el-form-item label="驿站名字" label-width="100px">
					<el-input autocomplete="off" placeholder="请输入驿站名字" v-model="courier.courierStationName"></el-input>
				</el-form-item>

				<el-form-item label="所属地区" label-width="100px">
					<el-cascader v-model="dizhi" :options="citys"></el-cascader>
					<el-input autocomplete="off" placeholder="详细地址" v-model="courier.courierStationAddress"></el-input>
				</el-form-item>


				<el-form-item label="所属小区" label-width="100px">
					<el-select filterable placeholder="请选择" v-model="value">
						<el-option v-for="item in communityList" 
						:key="item.communityId" 
						:label="item.communityName"
						:value="item.communityId">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="quxiao">取 消</el-button>
				<el-button type="primary" @click="queding">确 定</el-button>
			</div>
		</el-dialog>






	</div>
</template>

<script>
	//导入省市区数据
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				// 查询信息对象
				queryInfo: { //模糊查询中的所有的数据参数

					communityName: '', // 驿站名称
					communityDistrict: '', //所在小区

					startTime: '', // 开始时间
					endTime: '', // 结束时间
					pageNum: 1, // 页码
					pageSize: 10, // 每页展示条数
				},
				total: 5, //数据总条数
				date: '',
				communityList: [],

				//弹出的对话框
				show: false,
				title: '增加驿站',
				citys: citys,
				dizhi: [],
				courier: { //驿站弹出框填写信息
					courierStationAddress: "", //详细地址
					courierStationCity: "", //市
					courierStationCommunityId: '', //ID
					courierStationDistrict: "", //区
					courierStationImage: "",
					courierStationName: "", //驿站名称
					courierStationProvince: "", //省份

				},
				communityList:[],
				value:'',
				
			}
		},
		methods: {
			getCommunity() {
				this.$http.get("community/communityList", {
					params: {
						communityName: "",
						startTime: "",
						endTime: "",
						pageNum: 1,
						pageSize: 9999,
					}
				}).then(res => {
					this.communityList = res.data.data.list;
				}).catch(e => {
					this.$message(e);
				});
			},
			//点击编辑事件
			bianji(row) {
				this.courier = row;
				this.show = true;
				this.title = "编辑驿站";
				this.dizhi = [
					this.courier.courierStationProvince,
					this.courier.courierStationCity,
					this.courier.courierStationDistrict,
				];

			},
			//点击确定添加数据事件
			queding() {
				if (this.title == "增加驿站") {
					this.$http.post('courierStation/addCourierStation', this.courier)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success("添加成功！");
								this.show = false;
								this.queryCommunityList();
								this.quxiao()
							} else {
								this.$message.error("添加失败！");
							}
						})
						.catch(err => {
							this.$message.error("服务器异常！");
						})
				} else if (this.title == "编辑驿站") {
					this.$http.post('courierStation/modifyCourierStation', this.courier)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success("增加成功！");
								this.show = false;
								this.queryCommunityList();
								this.quxiao()
							} else {
								this.$message.error("添加失败！");
							}
						})
						.catch(err => {
							this.$message.error("服务器异常！");
						})
				}

			},
			//点击新增驿站
			xinzheng() {
				this.show = true;
				this.title = "增加驿站";

			},
			//点击取消事件
			quxiao() {
				this.show = false;
				this.courier = { //驿站信息
					courierStationAddress: "", //详细地址
					courierStationCity: "", //市
					courierStationCommunityId: '', //ID
					courierStationDistrict: "", //区
					courierStationImage: "",
					courierStationName: "", //驿站名称
					courierStationProvince: "", //省份
				};
				this.dizhi = [];
			},

			handleSizeChange(val) {
				//console.log(`每页$ {val}条`);
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.queryCommunityList();
			},
			handleCurrentChange(val) {
				//console.log(`当前页： $ {val}`);
				this.queryInfo.pageNum = val;
				this.queryCommunityList()
			},
			//查询所有的小区信息函数
			queryCommunityList() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.queryInfo
					})
					.then(res => {
						//console.log(res.data)
						if (res.data.status == 200) {
							//console.log(res.data.data.list)
							this.communityList = res.data.data.list
							//动态赋予数据总条数
							this.total = res.data.data.total;
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常！')
					})
			}
		},
		mounted() { //钩子函数--页面加载后直接执行的代码块
			this.queryCommunityList()
		},
		watch: {
			xinzheng() {
				this.getCommunity();
			},
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0];
					this.queryInfo.endTime = this.date[1];
				} else {
					this.queryInfo.startTime = ""
					this.queryInfo.endTime = ""
				}
			},
			dizhi() {
				this.courier.courierStationProvince = this.address[0];
				this.courier.courierStationCity = this.address[1];
				this.courier.courierStationDistrict = this.address[2];
			},
		},


	}
</script>

<style>
</style>